<template>

	<page-meta root-font-size="14px"></page-meta>

	<div class="page">

		<div class="header items-center" style="
			display: flex;
			flex-flow: row;
			align-items: center;
			height: initial;
			border-bottom: solid 0.13rem #000000;
		">

			<img class="shrink-0 image" @click="goBack()"
				src="http://haojiezhe12345.top:8090/miniprogram_static/community/07d17bbcc5aac1e16b40a0ba37dad6ca.png" />

			<div class="flex-row items-center" style="
				height: initial;
				margin-left: auto;
			">
				<img class="shrink-0 image_2"
					src="http://haojiezhe12345.top:8090/miniprogram_static/community/bb7786996ddb45296d5bf6c5c44f504a.png" />
				<span class="ml-18 text">社区</span>
			</div>

			<uni-icons type="person-filled" size="2.2rem" style="margin-left: auto;"
				@click="gotoUrl('/pages/community/personal')"></uni-icons>

		</div>

		<div class="flex-col group_4">

			<div style="display: flex;">

				<div class="flex-row section">

					<div class="type-selector" @click="type = 0">
						<img class="image_4"
							src="http://haojiezhe12345.top:8090/miniprogram_static/community/3a4a3bbc8d94bcfc796ce137b855fd8a.png" />
						<span class="font text_2" :style="{ color: (type == 0 ? '#a89965' : '#444') }">动态</span>
						<div class="section_2 pos" v-if="type == 0"></div>
					</div>

					<div class="type-selector" @click="type = 1">
						<img class="image_4"
							src="http://haojiezhe12345.top:8090/miniprogram_static/community/9804f80d2514a328ea2f6c9e623cf654.png" />
						<span class="font text_2" :style="{ color: (type == 1 ? '#a89965' : '#444') }">好友</span>
						<div class="section_2 pos" v-if="type == 1"></div>
					</div>

				</div>

				<view class="add-button">
					<image @click="gotoUrl('/pages/community/publish')"
						src="http://haojiezhe12345.top:8090/miniprogram_static/community/e863f78e9d065acbf347da94e1a1c6ad.png">
					</image>
				</view>

			</div>

			<posts :type="type" ref="postsRef"></posts>

		</div>
	</div>
</template>

<script>
	import posts from './posts.vue'

	import {
		gotoUrl,
		goBack,
	} from "@/utils.js"

	export default {
		components: {
			posts,
		},
		data() {
			return {
				type: 0,

				gotoUrl,
				goBack,
			};
		},
		onLoad() {
			uni.$on('reloadCommunity', this.loadPosts)
		},
		onUnload() {
			uni.$off('reloadCommunity')
		},
		mounted() {},
		async onPullDownRefresh() {
			await this.loadPosts()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500);
		},

		onReachBottom() {
			this.$refs.postsRef.fetchNextPagePosts()
		},

		methods: {
			async loadPosts() {
				await this.$refs.postsRef.fetchPosts()
			},
		},
		watch: {
			type() {
				this.$nextTick(() => {
					this.loadPosts()
				});
			}
		}
	};
</script>

<style scoped lang="css">
	@import url("main.css");

	.type-selector {
		display: flex;
		align-items: center;
		padding: 0.75rem;
		position: relative;
		gap: 0.5rem;
	}

	.add-button {
		width: 3.4rem;
		height: 3.4rem;
		box-sizing: border-box;
		border-radius: 1.25rem;
		background-color: #4c8a5a1f;
		border: solid 0.063rem #000000;
		margin-left: auto;
		padding: 0.7rem;
	}

	.add-button image {
		width: 100%;
		height: 100%;
	}

	posts {
		margin-top: 1.2rem;
	}

	.ml-19 {
		margin-left: 1.19rem;
	}

	.mt-105 {
		margin-top: 6.56rem;
	}

	.mt-19 {
		margin-top: 1.19rem;
	}

	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		min-height: 100%;
	}

	.header {
		padding: 0.88rem 0.69rem;
		background-color: #ff9692;
		overflow: hidden;
		height: 6.38rem;
	}

	.image {
		width: 2rem;
		height: 2rem;
	}

	.group {
		padding: 0 0.25rem;
	}

	.group_2 {
		margin-left: 5.69rem;
	}

	.image_2 {
		width: 2.25rem;
		height: 2.25rem;
	}

	.text {
		color: #000000;
		font-size: 1.75rem;
		font-family: AlimamaShuHeiTi;
		line-height: 2.04rem;
	}

	.image_3 {
		width: 2rem;
		height: 2rem;
	}

	.group_3 {
		overflow-y: auto;
	}

	.group_4 {
		padding: 1rem;
	}

	.section {
		background-color: #ffffff;
		border-radius: 1.25rem;
		border: solid 0.063rem #000000;
	}

	.equal-division-item {
		position: relative;
		flex: 1 1 0;
	}

	.group_5 {
		padding: 0.75rem 0.69rem;
	}

	.image_4 {
		width: 1.75rem;
		height: 1.81rem;
	}

	.font {
		font-size: 1.2rem;
		font-family: AlimamaShuHeiTi;
		line-height: 1.4rem;
		color: #000000;
	}

	.text_2 {
		margin-right: 0.5rem;
	}

	.section_2 {
		background-color: #4c8a5a1f;
		border-radius: 1.25rem;
	}

	.pos {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.equal-division-item_2 {
		flex-shrink: 0;
	}

	.group_6 {
		padding: 0.75rem 0;
	}

	.image_5 {
		width: 1.81rem;
		height: 1.81rem;
	}

	.text_3 {
		line-height: 1.4rem;
	}

	.section_3 {
		padding: 1.2rem;
		box-shadow: 0rem 0.25rem 0rem #18191f;
		background-color: #ffffff;
		border-radius: 1rem;
		border-left: solid 0.13rem #41434f;
		border-right: solid 0.13rem #41434f;
		border-top: solid 0.13rem #41434f;
		border-bottom: solid 0.13rem #41434f;
	}

	.text_4 {
		color: #41434f;
		font-size: 0.94rem;
		font-family: HarmonyOSSansSC;
		font-weight: 900;
		line-height: 0.9rem;
	}

	.text_5 {
		padding: 0 0.75rem;
		word-wrap: break-word;
		width: 100%;
		box-sizing: border-box;
	}

	.image_6 {
		border-radius: 1.56rem;
		width: 17.13rem;
		height: 9.31rem;
	}

	.image_7 {
		margin-top: 0.88rem;
	}

	.image_8 {
		width: 2.25rem;
		height: 0.5rem;
	}

	.image_9 {
		margin-top: 0.63rem;
	}

	.image_10 {
		margin-top: 0.5rem;
		width: 8.63rem;
		height: 1.13rem;
	}

	.group_7 {
		padding: 0 2.56rem;
	}

	.text_6 {
		margin-left: 0.38rem;
	}
</style>